<template>
<div>
  <a-modal v-model:visible="visible" :width="300" :footer="null" :bodyStyle="bodyStyle"  @ok="handleOk">
    <a-descriptions :column="1" :labelStyle="labelStyle">
      <a-descriptions-item label="货号">长协-FOB</a-descriptions-item>
      <a-descriptions-item label="船舶名称">Golar Frost</a-descriptions-item>
      <a-descriptions-item label="IMO">893290</a-descriptions-item>
      <a-descriptions-item label="装载港">Golar Frost</a-descriptions-item>
      <a-descriptions-item label="预计装载时间">2020.02.10</a-descriptions-item>
      <a-descriptions-item label="预计卸载时间">2020.02.10</a-descriptions-item>
      <a-descriptions-item label="运费：">3344</a-descriptions-item>
      <a-descriptions-item label="贸易利润率：">60%</a-descriptions-item>
    </a-descriptions>
  </a-modal>
</div>
</template>

<script setup>
import {ref} from "vue";
const visible = ref(false);
const labelStyle = ref({
  color: '#6B7A8B'
})
const bodyStyle = ref({})
const showModal = () => {
  visible.value = true;
};
const handleOk = e => {
  console.log(e);
  visible.value = false;
};
// eslint-disable-next-line no-undef
defineExpose({
  showModal,
  handleOk
})
</script>

<style scoped>

</style>
